/* 合同管理》附件配置 */
<template>
  <div>
    <el-row class="samples-info-box">
      <el-col :span="15">
        <el-row :gutter="10">
          <el-collapse-transition>
            <el-col ref="moreSearch" :lg="17" class="samples-searchBar-wrapper" :class="{'samples-show-more':ismore}">
              <el-col :lg="8" :xl="6">
                <el-input
                  v-model="searchList.name"
                  size="small"
                  placeholder="模板名称"
                  clearable
                  class="samples-search-input"
                />
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.classifyName"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="适用分类"
                  style="width:100%"
                  @change="classifyNameChange"
                >
                  <el-option v-for="item in contractClassify" :key="item.code" :label="item.name" :value="item.name" />
                </el-select>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.typeName"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="适用类型"
                  style="width:100%"
                >
                  <el-option v-for="item in searchContractType" :key="item.code" :label="item.name" :value="item.name" />
                </el-select>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchList.enabled"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="状态"
                  style="width:100%"
                >
                  <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-col>
              <el-col :lg="16" :xl="12">
                <!-- <el-input
                  v-model="searchList.b2"
                  size="small"
                  placeholder="开始日期 ~ 结束日期"
                  clearable
                  class="samples-search-input"
                /> -->
                <el-date-picker
                  v-model="timeArr"
                  size="small"
                  style="width:100%"
                  value-format="yyyyMMdd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-col>
            </el-col>
          </el-collapse-transition>
          <el-col :lg="7">
            <el-button size="small" type="primary" plain class="samples-search-btn" @click="searchBtn()">
              <i class="el-icon-search" />
            </el-button>
            <el-button size="small" type="text" class="samples-search-btn samples-ismore-button" @click="moreClick">
              MORE
              <i class="samples-search-icon" :class="[ismore?'el-icon-arrow-up':'el-icon-arrow-down']" />
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <!-- 右半边按钮区域 -->
      <el-col :span="9" class="samples-text-right">
        <!-- 点击新增关联  跳转到新增页面 -->
        <el-button size="small" type="success" @click="insertBtn()">新 增</el-button>
      </el-col>
    </el-row>
    <my-table
      :data-objects="dataObjects"
      :contract-classify="contractClassify"
      :single-contract-type="singleContractType"
      :project-contract-type="projectContractType"
      @giveQuery="getQuery"
    />
    <my-dialog
      :dialog-show="dialogShow"
      dialog-type="新增附件"
      :contract-classify="contractClassify"
      :single-contract-type="singleContractType"
      :project-contract-type="projectContractType"
      @dialogDisplay="dialogDisplayFa"
    />
  </div>
</template>

<script>
import myTable from './components/table'
import myDialog from './components/dialog'
import * as contractCorrelationApi from '@/api/contractManage/contractCorrelation'
export default {
  components: {
    myTable,
    myDialog
  },
  data() {
    return {
      // 控制弹出框的显示和隐藏
      dialogShow: false,

      // 控制弹框显示的是新增还是编辑
      dialogType: '新增',
      // 输入模块
      dropShow: false,
      ismore: false,
      searchList: {
        code: '',
        name: '',
        typeName: '',
        classifyName: '',
        enabled: '',
        time: '',
        page: 1,
        pageSize: 10
      },
      timeArr: [],
      dataObjects: {},
      // 这里是字典相
      contractClassify: [],
      projectContractType: [],
      singleContractType: [],
      searchContractType: [],
      stateList: [
        { value: 1, label: '启用' },
        { value: 0, label: '禁用' }
      ]

    }
  },

  computed: {},

  mounted() {
    if (this.$route.query.isTag != true) {
      this.getList()
    }
  },
  created() {
    if (this.$route.query.isTag != false) {
      this.getList()
    }
    this.getDict()
  },
  methods: {
    // 拿到数据字典相
    getDict() {
      contractCorrelationApi.dictionary('contract_classify').then(res => {
        if (res.code === 1) {
          this.contractClassify = res.data
        }
      })
      contractCorrelationApi.dictionary('project_contract_type').then(res => {
        if (res.code === 1) {
          this.projectContractType = res.data
        }
      })
      contractCorrelationApi.dictionary('single_contract_type').then(res => {
        if (res.code === 1) {
          this.singleContractType = res.data
        }
      })
    },
    moreClick() {
      this.ismore = !this.ismore
      const ref = this.$refs.moreSearch.$el
      if (this.ismore) {
        ref.style.height = ref.scrollHeight + 'px'
      } else {
        ref.style.height = '32px'
      }
    },
    dropClick(show) {
      this.dropShow = show
    },
    // 搜索发生改变
    classifyNameChange() {
      this.searchList.typeName = ''
      if (this.searchList.classifyName == '单项合同') {
        this.searchContractType = this.singleContractType
      } else if (this.searchList.classifyName == '项目合同') {
        this.searchContractType = this.projectContractType
      } else {
        this.searchContractType = []
      }
    },
    getList() {
      if (!this.timeArr) {
        this.timeArr = []
      }
      if (this.timeArr.length > 0) {
        this.searchList.time = this.timeArr[0] + '-' + this.timeArr[1]
      } else {
        this.searchList.time = ''
      }
      contractCorrelationApi.contractAttachmentTypePage(this.searchList).then(res => {
        if (res.code === 1) {
          this.dataObjects = res.data
        }
      })
    },
    // i元素穿过来的dialog显示
    dialogDisplayFa(val) {
      this.dialogShow = val
    },
    // 点击新增按钮
    insertBtn() {
      this.dialogShow = true
      this.dialogType = '新增'
    },
    getQuery(val) {
      this.searchList.page = val.page
      this.searchList.pageSize = val.pageSize
      this.getList()
    },
    searchBtn() {
      this.searchList.page = 1
      // this.searchList.pageSize = 10
      this.getList()
    }
  }
}
</script>
<style lang='scss' scoped>
</style>

